$(function () {
    // 模拟数据内容  这里为了为了方便使用了es6模板语法，不支持兼容ie9，请使用es5的拼接渲染方式

    var dataBanners = [
        { data_banner: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4', img: '../static/images/dh-pace/video_banner2.png', txt: '国际黄金期货价格屡创1' },
        { data_banner: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4', img: '../static/images/dh-pace/video_banner2.png', txt: '国际黄金期货价格屡创2' },
        { data_banner: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4', img: '../static/images/dh-pace/video_banner2.png', txt: '国际黄金期货价格屡创3' },
        { data_banner: 'https://media.w3.org/2010/05/sintel/trailer.mp4', img: '../static/images/dh-pace/video_banner2.png', txt: '国际黄金期货价格屡创4' },
        { data_banner: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4', img: '../static/images/dh-pace/video_banner2.png', txt: '国际黄金期货价格屡创4' }
    ]

    console.log(dataBanners);
    var banners_datas = ''

    $.each(dataBanners, function (v, m) {
        console.log(v, m.data_banner);
        //video-active 为选中效果
        banners_datas += `<div class="swiper-slide slide-video">
                    
                                    <div  class="video-banner "
                                        data-banner='${dataBanners[v].data_banner}'>
                                        <img src="${dataBanners[v].img}" alt="">
                                        <p>${dataBanners[v].txt}</p>
                                    </div>
                                
                                </div>`

              

    })
    $('.box-video').append(banners_datas)
    

    // video切换
    $('.video-banner').click(function (e) {
    
    
       
         
        // window.location.href = 'page_dh-pace.html?aid=1'
        $(this).addClass('video-active').parent().siblings().children().removeClass('video-active')
        var playurl = $(this).data('banner');
        document.getElementById("videos").src = playurl;
        $("#videos")[0].play();
 


      
    })

// 点击获取当前下标
    $('.swiper-slide').click(function(){
      var i =$(this).index()
        changeURLParam('aid', i)
    })

    //    轮播图需要放数据渲染下面或者onlad
    // 获取自定义属性

    var mySwipersVideo = new Swiper('.swiper-videos', {
        // autoplay: 5000,//可选选项，自动滑动
        // loop: true,//可选选项，开启循环
        // 渲染数据的时候，如果真实接口出不来数据，请把swiper的js都放到请求里面，开启下面swiepr初始化
        // observer:true,//修改swiper自己或子元素时，自动初始化swiper
        //     observeParents:true,//修改swiper的父元素时，自动初始化swiper
        paginationClickable: true,
        slidesPerView: 4,
        // onInit: function (mySwipersVideo) {
        //     mySwipersVideo.swipeNext()
        // }
    })
    // 点击左右swiper按钮
    $('#btnVideo1').click(function () {
        mySwipersVideo.swipePrev();


    })
    $('#btnVideo2').click(function () {
        mySwipersVideo.swipeNext();
    })

// 实现无刷新动态添加url地址
function changeURLParam(name, value) {
    var url = document.URL, resultUrl = ''
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
    var r = window.location.search.substr(1).match(reg);
    var replaceText = name + '=' + value;
    if (r != null) {
        var tmp = url.replace(unescape(name + '=' + r[2]), replaceText);
        resultUrl = (tmp);
    } else {
        if (url.match('[\?]')) {
         resultUrl = url + '&' + replaceText;
        }
        else {
         resultUrl = url + '?' + replaceText;
        }
    }
    history.replaceState(null, null, resultUrl)
 }



})